<template>
    <!-- 模板内容保持不变 -->
    <el-card class="mb-20" shadow="hover">
        <!-- 卡片头部操作按钮 -->
        <div slot="header" class="clearfix">
            <span>采购申请单</span>
            <!-- 添加商品按钮，点击打开商品选择模态框 -->
            <el-button type="primary" icon="el-icon-circle-plus" @click="openAddGoodsModal">添加商品</el-button>
            <!-- 移除商品按钮，操作选中商品 -->
            <el-button type="danger" icon="el-icon-delete" class="ml-10" @click="removeSelectedGoods">移除商品</el-button>
            <!-- 提交按钮 -->
            <el-button type="success" icon="el-icon-check" class="ml-10" @click="submitApplication">提交</el-button>
        </div>

        <!-- 采购申请表单 -->
        <el-form :model="form" label-width="120px" class="mt-20">
            <!-- 表格展示采购商品列表 -->
            <el-form-item label="采购商品列表">
                <el-table
                    :data="form.goodsList"
                    stripe
                    border
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                >
                    <!-- 选择列 -->
                    <el-table-column type="selection" width="55"></el-table-column>
                    <!-- 序号列 -->
                    <el-table-column label="序号" width="50">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <!-- 商品名称列 -->
                    <el-table-column label="商品名称" prop="goodsName"></el-table-column>
                    <!-- 供货商列 -->
                    <el-table-column label="供货商名称" prop="supplierName"></el-table-column>
                    <!-- 单价列 -->
                    <el-table-column label="单价(元)" prop="unitPrice" width="100"></el-table-column>
                    <!-- 数量列（仅保留输入框） -->
                    <el-table-column label="数量(件)" width="120">
                        <template slot-scope="scope">
                            <el-input-number
                                v-model="scope.row.quantity"
                                :min="1"
                                @change="checkStock(scope.row)"
                                style="width: 120px; margin: 0"
                                class="quantity-input"
                            ></el-input-number>
                        </template>
                    </el-table-column>
                    <!-- 小计列 -->
                    <el-table-column label="小计(元)" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.unitPrice * scope.row.quantity | numberFilter }}
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <!-- 总数量表单域 -->
            <el-form-item label="总数量">
                <el-input v-model.number="form.totalQuantity" disabled placeholder="自动计算"></el-input>
            </el-form-item>
            <!-- 总金额表单域 -->
            <el-form-item label="总金额">
                <el-input v-model.number="form.totalAmount" disabled placeholder="自动计算"></el-input>
            </el-form-item>
            <!-- 采购人表单域 -->
            <el-form-item label="采购人">
                <el-input v-model="form.purchaser" placeholder="请输入采购人"></el-input>
            </el-form-item>
            <!-- 备注表单域 -->
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" rows="3"></el-input>
            </el-form-item>
        </el-form>

        <!-- 添加商品模态框 -->
        <el-dialog :visible.sync="addGoodsModalVisible" title="选择商品">
            <!-- 加载状态 -->
            <div v-if="isLoadingGoods" class="loading">加载中...</div>
            <el-table
                v-else
                :data="goodsList"
                stripe
                border
                style="width: 100%"
                @row-click="selectGoods"
            >
                <el-table-column label="商品编号" prop="productId"></el-table-column>
                <el-table-column label="商品名称" prop="name"></el-table-column>
                <el-table-column label="商品价格" prop="salePrice" width="100"></el-table-column>
                <el-table-column label="商品分类" prop="level"></el-table-column>
                <el-table-column
                    label="上架状态"
                    width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status==0">{{ scope.row.status == 0 ? '上架':'下架' }}</el-tag>
                        <el-tag v-else type="danger">{{ scope.row.status == 0 ? '上架':'下架' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button @click="searcPhurchase(scope.row)" type="text" size="small">查看供货商</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-footer>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="ListPage"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-footer>
        </el-dialog>

        <!-- 选择供货商模态框 -->
        <el-dialog :visible.sync="selectSupplierModalVisible" title="供货商报价">
            <!-- 加载状态 -->
            <div v-if="isLoadingSuppliers" class="loading">加载中...</div>
            <div v-else-if="currentGoods">
                <span>商品名称：{{ currentGoods.name }} 基础价格：{{ currentGoods.salePrice }}</span>
                <el-table
                    :data="currentGoods.suppliers"
                    stripe
                    border
                    style="width: 100%"
                    @row-click="selectSupplier"
                >
                    <el-table-column label="供货商" prop="supplierName"></el-table-column>
                    <el-table-column label="价格" prop="productOffer" width="100"></el-table-column>
                    <!-- 新增库存列 -->
                    <el-table-column label="库存" prop="quantity" width="100"></el-table-column>
                </el-table>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="selectSupplierModalVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            // 表单数据
            form: {
                goodsList: [], // 采购商品列表
                totalQuantity: 0, // 总数量
                totalAmount: 0, // 总金额
                purchaser: '', // 采购人
                remark: '' // 备注
            },
            addGoodsModalVisible: false, // 添加商品模态框显示状态
            selectSupplierModalVisible: false, // 选择供货商模态框显示状态
            currentGoods: null, // 当前选择的商品
            goodsList: [],
            // 分页
            vo: {},
            total: 0,
            size: 10,
            current: 1,
            ListPage: [10, 20, 30, 40, 50],
            isLoadingGoods: false, // 商品列表加载状态
            isLoadingSuppliers: false // 供应商列表加载状态
        };
    },
    methods: {
        // 打开添加商品模态框
        openAddGoodsModal() {
            this.addGoodsModalVisible = true;
        },
        // 选择商品
        selectGoods(row) {
            this.currentGoods = row;
            this.addGoodsModalVisible = false;
            this.selectSupplierModalVisible = true;
        },
        // 选择供货商
        selectSupplier(row) {
            // 假设商品名称从 row.name 获取，单价从 row.productOffer 获取并转换为数字
            this.form.goodsList.push({
                goodsName: this.currentGoods.name, // 确保 row 有 name 字段
                supplierName: row.supplierName,
                unitPrice: parseFloat(row.productOffer), // 转换为数字
                quantity: 1,
                stock: row.quantity // 新增库存字段
            });
            this.selectSupplierModalVisible = false;
            this.updateTotal();
        },
        // 更新总数量和总金额
        updateTotal() {
            this.form.totalQuantity = this.form.goodsList.reduce((sum, item) => sum + item.quantity, 0);
            this.form.totalAmount = this.form.goodsList.reduce((sum, item) => sum + item.unitPrice * item.quantity, 0);
        },
        // 检查库存
        checkStock(item) {
            if (item.quantity > item.stock) {
                this.$message.warning('选择数量大于库存数量，无法继续增加！');
                item.quantity = item.stock;
            }
            this.updateTotal();
        },
        // 移除选中商品
        removeSelectedGoods() {
            this.form.goodsList = this.form.goodsList.filter(item =>!item._selected);
            this.updateTotal();
        },
        // 处理表格选择变化
        handleSelectionChange(selection) {
            this.form.goodsList.forEach(item => {
                item._selected = selection.includes(item);
            });
        },
        // 提交申请
        submitApplication() {
            console.dir(`form ${this.form.goodsList}`)

            if (!this.form.purchaser) {
                this.$message.error('请填写采购人');
                return;
            }

            const purchaseRequestData = {
                totalQuantity: this.form.totalQuantity,
                totalAmount: this.form.totalAmount,
                purchaser: this.form.purchaser,
                remark: this.form.remark
            };

            const goodsListData = this.form.goodsList.map(item => ({
                goodsName: item.goodsName,
                supplierName: item.supplierName,
                unitPrice: item.unitPrice,
                quantity: item.quantity
            }));
            // 发送采购申请主信息请求
            this.$axios.post('/procure/submitPurchaseRequest', purchaseRequestData)
                .then(response1 => {
                    if (response1.data.success) {
                        // 假设后端返回的采购单ID在 response1.data.id 中
                        const parentId = response1.data.id;
                        // 发送采购商品明细信息请求
                        return this.$axios.post(`/procure/submitGoodsList?parentId=${parentId}`, goodsListData);
                    } else {
                        this.$message.error('提交失败，请检查输入或联系管理员');
                        return Promise.reject();
                    }
                })
                .then(response2 => {
                    if (response2.data.success) {
                        this.$message.success('采购申请提交成功');
                        this.form = {
                            goodsList: [],
                            totalQuantity: 0,
                            totalAmount: 0,
                            purchaser: '',
                            remark: ''
                        };
                    } else {
                        this.$message.error('提交失败，请检查输入或联系管理员');
                    }
                })
                .catch(error => {
                    console.error('提交接口请求失败:', error);
                    this.$message.error('网络异常，请稍后重试');
                });
        },
        // 搜索
        search() {
            this.isLoadingGoods = true;
            // 修改请求路径，使用模板字符串动态插入 current 和 size 的值
            this.$axios.post(`/product/select/${this.current}/${this.size}`, this.vo, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => {
                this.goodsList = res.data.list; // 假设返回的数据结构中有 list 字段
                this.total = res.data.total;
            }).catch(error => {
                this.handleError(error, '获取商品列表数据失败，请稍后重试');
            }).finally(() => {
                this.isLoadingGoods = false;
            });
        },
        // 统一错误处理
        handleError(error, message) {
            console.error('请求出错:', error);
            this.$message.error(message);
        },
        // 分页
        handleSizeChange(val) {
            this.size = val;
            this.search();
        },
        // 分页
        handleCurrentChange(val) {
            this.current = val;
            this.search();
        },
        searcPhurchase(row) {
            // 打印当前点击行的商品ID（用于调试）
            console.log(111, row.productId);
            // 设置供应商列表加载状态为加载中
            this.isLoadingSuppliers = true;
            // 发送GET请求到后端接口，根据商品ID获取供应商数据
            this.$axios.post(`/quotes/getSupplierByProductId/${row.productId}`).then(res => {
                // 打印后端返回的数据（用于调试）
                console.log('Backend response:', res.data);
                // 判断后端返回的数据是否为数组类型
                if (Array.isArray(res.data)) {
                    // 使用 Vue 的 $set 方法为当前选中商品添加 suppliers 字段，并赋值为后端返回的供应商数据数组
                    this.$set(this.currentGoods,'suppliers', res.data);
                    // 判断供应商数据数组的第一个元素是否存在 productOffer 字段
                    if (res.data.length > 0 && res.data[0].productOffer!== undefined) {
                        // 将第一个供应商的 productOffer 字段值转换为浮点数，并更新当前选中商品的 salePrice 字段
                        this.$set(this.currentGoods,'salePrice', parseFloat(res.data[0].productOffer));
                    }
                } else {
                    // 如果后端返回的数据不是数组，将其包装成数组
                    const newData = [res.data];
                    // 使用 Vue 的 $set 方法为当前选中商品添加 suppliers 字段，并赋值为包装后的数组
                    this.$set(this.currentGoods,'suppliers', newData);
                    // 判断包装后的数组中第一个元素（即唯一元素）是否存在 productOffer 字段
                    if (res.data.productOffer!== undefined) {
                        //将第一个供应商的 productOffer 字段值转换为浮点数，并更新当前选中商品的 salePrice 字段
                        this.$set(this.currentGoods,'salePrice', parseFloat(res.data.productOffer));
                    }
                }
                // 显示选择供货商模态框
                this.selectSupplierModalVisible = true;
            }).catch(error => {
                // 调用统一的错误处理方法，处理获取供应商数据失败的情况
                this.handleError(error, '获取供货商数据出错，请稍后重试');
            }).finally(() => {
                // 设置供应商列表加载状态为加载完成
                this.isLoadingSuppliers = false;
            });
        }
    },
    created() {
        this.search();
    },
    // 新增 filters 定义
    filters: {
        numberFilter(value) {
            // 处理数值显示，例如保留两位小数
            if (typeof value === 'number') {
                return value.toFixed(2);
            }
            return value;
        }
    }
};
</script>

<style scoped>
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }
.text-right { text-align: right; }
.el-table { margin-top: 15px; }
.loading {
    text-align: center;
    padding: 20px;
}
.quantity-input {
    border-color: #dcdfe6; /* 输入框边框色 */
    border-radius: 4px; /* 圆角 */
}
</style>